<template   >
        <layout  showNew   title="项目信息管理"   @newBtnEvt= " toNewPage" >
             <ul class="list-box"   @scroll="pageScrollEvt"  >
                <li class="item"   v-for = "item in  list " :key = 'item.id'>

                    <van-swipe-cell>
                            <span v-text = "item.name" ></span>
                            <em>负责人:{{ item.ownerName }}</em>
                        <!--  <em>创建日期:{{ item.signTime }}</em> -->
                        <!-- 1、自定义指令实现 日期格式化  这里自定义一个指令  v-format-->
                        <!--   在指令上通过 : 与 .修饰符传递参数,    ：传递的是属性值,通过arg接收， 修饰符. 传递的属性在modifiers下，值为布尔值，它可以带多个属性 -->
                            <em v-format:red.24.bold = " item.signTime " ></em>

                            <!-- 2、自定义过滤器实现日期格式化
                                1） 过滤器用法：竖线 " | "   +  自定义过滤器方法名
                                2）过滤器传参，实现日期自定义，例如 ：只要年月   
                            -->
                        <!--    <em>创建日期:{{ item.signTime  | format('month')}}</em> -->
                            <em>项目地址:{{ item.address }}</em>
                        <template #right>
                            <van-button square type="danger" @click="deleteEvt(item)" text="删除" />
                            <van-button square type="primary" @click="editEvt(item)"    text="编辑" />
                        </template>
                    </van-swipe-cell>

                  
                </li>

                <li v-show="!loading && hasMore " class="more">上滑加载更多数据</li>
                <li v-show="!loading  && !hasMore " class="more">没有更多数据</li>

                <li v-show="loading" class="more">
                    <van-loading size="24px">加载中...</van-loading>

                </li>
               
             </ul>
         
        </layout>
</template>

<script>

import { projectDeleteApi, projectListApi } from '../../apis/projectApi'
export default {


    data() {
        return {
            loading:true,
            hasMore:true,
            list:[],
            page:1
        }
    },
        
    

    created(){
             this.getList()
             console.log(this.myPageRole)
    },

     computed:{
         

       // 通过计算属性，拿到，这个页面上的按钮功能权限
      //  es6 简要写法
     /*   myPageRole(){
             return   ( this.$store.getters['common/roleList'].find(oo=> oo.id  ===  "PROJECT-01-01"  )  || {}).role  ||   []
       } */


       //  分步写法
       myPageRole(){


           let  nowRoleObj  =  this.$store.getters['common/roleList'].find(oo=> oo.id  ===  "PROJECT-01-01" )
           let  nowRole  = []

           if( !! nowRoleObj){nowRole =  nowRoleObj.role}
           
             return   nowRole.length <= 0  ? []: nowRole
       }

     }, 

  
    

    methods:{

          async  getList(){

                 let result = await  projectListApi({page:this.page,size:6})
                  if(  result.code === 200){
                  
                    //  结构方法的使用，合并以前的数据
                     this.list = [...this.list,...result.data.rows]

                     this.hasMore =  (this.page * 6) <  result.data.total
                  }

            // 关闭加载标识

            this.loading  = false
                  
        },
        pageScrollEvt(evt){
               let   target     = evt.target  
               let   myHeight = target.clientHeight
               let   realHeight = target.scrollHeight
               let    scrollHeight = target.scrollTop


            if(realHeight - myHeight - scrollHeight - 20 <= 0 && !this.loading &&  this.hasMore ){

                   // 需要需要把加载状态改为加载中

              this.loading =   true 

              // 需要对页面自增 1 页

              this.page += 1


              // 调用方法，再次获取数据

              this.getList()
                



            }






        },


           //    c   新增项目
            toNewPage(){


                if( !this.myPageRole.includes('C')){
                    this.$toast.fail('你没有新增权限，请联系管理员')
                    return
                }
                this.$router.push({path:'/project/edit', query:{fromPage:'list'}})
            },

             // d    删除数据方法
            deleteEvt(item){
                if( !this.myPageRole.includes('D')){
                    this.$toast.fail('你没有删除权限，请联系管理员')
                    return
                }

            this.$dialog.confirm({
                    title: '删除警告',
                    message: `你即将把【${item.name}】项目删除，确定要执行？`,
                    })
                    .then(
                        async () => {
                        
                            let  result  = await  projectDeleteApi(item.id)
                            if(result.code === 200){
                                this.$toast.success('删除数据成功')
                                let  index = this.list.findIndex(it => it.id ===  item.id )
                                this.list.splice(index,1)
                            }else{
                                this.$toast.fail('删除数据失败，请重试')
                            }
                             
                    })
                    .catch(() => {
                        // on cancel
                    });

            },

            //  u 编辑更新功能
            editEvt(item){

                if( !this.myPageRole.includes('U')){
                    this.$toast.fail('你没有权限编辑，请联系管理员')
                    return
                }
                     this.$router.push({path:'/project/edit',query:{id:item.id, fromPage:'list'}})
            }

           } 
}
</script>

<style lang="less" scoped>
        .list-box{
            display: block;
            height: 100%;
            padding: 0  12px;
            overflow-x: hidden;
              .item{
                padding: 12px;
               border-bottom: solid 1px #ddd;

               span{
                display: block;
                font-size: .9rem;
                color: #1e1e1e;

               }

               em{

                display: block;
                font-size: .7rem;
                font-style: normal;
                color: #aaa;
                margin-top:12px ;
               }

               .van-button{
                height: 100%;
               }
              }
              .more{
                padding: 8px;
                font-size:.7rem ;
                color: #999;
                text-align: center;
              }
        }
</style>